<div class="layui-btn-group enian-btn-group">
	<button id='add' class="layui-btn layui-btn-sm layui-btn-primary">
  		<i class="layui-icon">&#xe61f;</i><div class="enian-btn-group-text">添加</div>
  	</button>
  	<button id='search' class="layui-btn layui-btn-sm layui-btn-primary">
  		<i class="layui-icon">&#xe615;</i><div class="enian-btn-group-text">搜索</div>
  	</button>
</div>

<div id="data"></div>

<div id="form"></div>



<script type="text/html" id="appList_s_tool">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="del">删除</a>
</script>
  
      
<script>

// 设置状态栏标题
var status_bar=[
    {"type":"url","url":"","title":"示例应用-内容"}
]
enianAdmin.render_nav_bar(status_bar);

layui.config({base: '/static/layui_extends/'})
layui.use(['table','form','laypage','jquery','element','enianTable'], function() {
	var table = layui.table,
	laypage = layui.laypage
	,$ = layui.jquery
	,enianTable = layui.enianTable
	,form = layui.form;
	var tableArg={where:[],order:[]};
	var formLayerIndex;//form表单弹窗序号
	
    // json字段数据（所谓的一套json生成3个模板，就是这个，这个模块叫eianTable，需要在layui.use中引入）
    // enianTable模块的详细开发文档：http://doc.enianteam.com/layui_module/50.html
    var fieldData = [
    // {"tableHead":{"type":"checkbox","fixed":"left"},"type":false}
    {tableHead:{"field":"id","width":80,"title":"ID","sort":true},"type":"noInput"}
    ,{tableHead:{"field":"title","title":"标题","edit":"text"},"type":"input","typeData":{"msg":"请输入"}}
    ,{tableHead:{"field":"url","title":"跳转地址","edit":"text"},"type":"input","typeData":{"msg":"请输入"}}
    ,{tableHead:{"width":130,"align":"center","fixed":"right","toolbar":"#appList_s_tool"},"type":false}
    ];
    // (动态)引入enianTable的css样式
    layui.link('/static/layui_extends/enianTable/enianTable.css');

    // 设定按钮点击弹出 搜索模板
    var ets = enianTable.search(fieldData);
    $('#search').click(function(){
		ets.open();
    });
    
    // 监听搜索
	ets.submit(function(d){
		// console.log(d);
		getTable.renderObj().reload({
		  where:{where:d}
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		});
	});
    
    // 监听添加按钮，生成表单模板
    $('#add').click(function(){
		enianTable.form({
            elem:"#form"
            ,data:fieldData
            ,submitBtn:'保存'
            ,layer:"添加"
            ,submit:function(data){
            	// console.log(data);
            	if(data.field.status){
            		data.field.status=1;
            	}else{
            		data.field.status=0;
            	}
            	$.ajax({
						type: 'POST',
						url: "{:url('addContentData')}",//添加数据的接口地址
						data: data.field,
						success: function(data) {
							if(data.code == 1) {
								layer.msg('添加成功！');
								layer.close(formLayerIndex);
								enianAdmin.reload();
							} else {
								var msg = data.msg?' 原因：'+data.msg:'请刷新后重试。';
								layer.alert('添加失败，'+msg);
							}
						}
				});
			}
            ,layerSuccess:function(obj){
				formLayerIndex=obj.index;
			}
        })
        
    });
    
    // 表格模板
    var getTable = enianTable.table({
		elem:"#data"
		,url:"{:url('getContentData')}"
		,data:fieldData
		,config:{
			limit:30
			,height:evar.tableHeight
			// ,skin:'line'
			,page:true
			// ,toolbar:true
			,autoSort: false
			,method:'post'
			//详见layui文档 数据表格 - 基本参数
		}
		,checkbox:function(field,obj){
			layer.tips(field.value + ' ' + field.name + '：'+ obj.elem.checked, obj.othis);
			if(obj.elem.checked){
		   		ajaxFiled('field='+ field.name +'&value=1&id=' + field.value)
		    }else{
		   		ajaxFiled('field='+ field.name +'&value=0&id=' + field.value)
		    }
		}
		,toolEvent:function(obj){
			var data = obj.data;
			// console.log();

		//删除数据
		if(obj.event === 'del') {
			layer.confirm('确定此条删除吗？删除后不可恢复？', function(index) {
					
						layer.close(index);
						//删除
						//return;
						var d_data = "id="+data.id;
						$.ajax({
								type: 'POST',
								url: "{:url('delContentData')}",
								data: d_data,
								success: function(data) {
									// console.log(data);
									if(data.code == 1) {
										layer.msg('删除成功');
										obj.del();
									} else {
										var msg = data.msg?' 原因：'+data.msg:'请刷新后重试。';
										layer.alert('删除失败，'+msg);
									}
								}});
						});
			}
		}
	})
	
	//监听编辑
	getTable.on('edit',function(obj){
		var value = obj.value //得到修改后的值
    	,data = obj.data //得到所在行所有键值
   	 	,field = obj.field; //得到字段
   	 	var update_data="id="+data.id+"&field="+field+"&value="+ value;
 		ajaxFiled(update_data)
	})
	
	//监听排序
	getTable.on('sort',function(obj){
		tableArg.order= obj.field + " " + obj.type;
		table.reload(getTable.id, {
		    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
		    ,where: tableArg
		});
	})
	  
  	// 封装修改字段的ajax（其实本文件好多代码可以封装，由于上班时间少，一直没倒出时间整理）
	function ajaxFiled(d_data){
		$.ajax({
			type: 'POST',
			url: "{:url('updateContentData')}",
			data: d_data,
			success: function(data) {
				if(data.code == 1) {
					layer.msg('修改成功');
					
				} else {
					var msg = data.msg?' 原因：'+data.msg:'请刷新后重试。';
					layer.alert('修改失败，'+msg);
				}
			}});
		
	}

});
</script>
